React Context 최적화: 셀렉터 패턴 및 성능

React Context는 애플리케이션 상태를 관리하고 prop drilling 없이 컴포넌트 간에 공유할 수 있는 강력한 메커니즘을 제공합니다. 그러나 Context를 단순하게 구현하면 특히 크고 복잡한 애플리케이션에서 성능 병목 현상이 발생할 수 있습니다. Context 값이 변경될 때마다 해당 Context를 사용하는 모든 컴포넌트가 데이터의 작은 부분에만 의존하더라도 리렌더링됩니다.

이 기사에서는 React Context 성능을 최적화하기 위한 전략으로 셀렉터 패턴을 자세히 살펴봅니다. 작동 방식, 이점, 사용법을 설명하는 실제 예제를 제공합니다. 또한 관련 성능 고려 사항 및 대체 최적화 기술에 대해서도 논의합니다.

이해해야 할 문제: 불필요한 리렌더링

핵심 문제는 React의 Context API가 기본적으로 Context 값이 변경될 때마다 사용하는 모든 컴포넌트의 리렌더링을 트리거한다는 사실에서 발생합니다. Context가 사용자 프로필 데이터, 테마 설정 및 애플리케이션 구성이 포함된 큰 객체를 보유하는 시나리오를 고려해 보세요. 사용자 프로필 내에서 단일 속성을 업데이트하면 테마 설정에만 의존하더라도 Context를 사용하는 모든 컴포넌트가 리렌더링됩니다.

이는 특히 복잡한 컴포넌트 계층 구조와 빈번한 Context 업데이트를 처리할 때 상당한 성능 저하로 이어질 수 있습니다. 불필요한 리렌더링은 귀중한 CPU 사이클을 낭비하고 사용자 인터페이스를 느리게 만들 수 있습니다.

셀렉터 패턴: 대상 업데이트

셀렉터 패턴은 컴포넌트가 필요한 Context 값의 특정 부분만 구독할 수 있도록 하여 솔루션을 제공합니다. 전체 Context를 사용하는 대신 컴포넌트는 셀렉터 함수를 사용하여 관련 데이터를 추출합니다. 이렇게 하면 리렌더링 범위가 줄어들어 실제로 변경된 데이터에 의존하는 컴포넌트만 업데이트됩니다.

작동 방식:

1. Context Provider: Context Provider는 애플리케이션 상태를 보유합니다.
2. 셀렉터 함수: 이러한 함수는 Context 값을 입력으로 받아 파생된 값을 반환하는 순수 함수입니다. Context에서 특정 데이터 조각을 추출하는 필터 역할을 합니다.
3. 사용 컴포넌트: 컴포넌트는 사용자 정의 훅(종종 `useContextSelector`라고 함)을 사용하여 셀렉터 함수의 출력을 구독합니다. 이 훅은 선택한 데이터의 변경 사항을 감지하고 필요한 경우에만 리렌더링을 트리거하는 역할을 합니다.

셀렉터 패턴 구현

다음은 셀렉터 패턴 구현을 보여주는 기본 예제입니다.

1. Context 생성

먼저 Context를 정의합니다. 사용자 프로필과 테마 설정을 관리하기 위한 Context를 상상해 보겠습니다.

            import React, { createContext, useState, useContext } from 'react';

const AppContext = createContext({});

const AppProvider = ({ children }) => {
  const [user, setUser] = useState({
    name: 'John Doe',
    email: 'john.doe@example.com',
    location: 'New York'
  });
  const [theme, setTheme] = useState({
    primaryColor: '#007bff',
    secondaryColor: '#6c757d'
  });

  const updateUserName = (name) => {
    setUser(prevUser => ({ ...prevUser, name }));
  };

  const updateThemeColor = (primaryColor) => {
    setTheme(prevTheme => ({ ...prevTheme, primaryColor }));
  };

  const value = {
    user,
    theme,
    updateUserName,
    updateThemeColor
  };

  return (
    
      {children}
    
  );
};

export { AppContext, AppProvider };
            

              
                Copy
              
            
          

2. 셀렉터 함수 생성

다음으로 Context에서 원하는 데이터를 추출하는 셀렉터 함수를 정의합니다. 예를 들면 다음과 같습니다.

            const selectUserName = (context) => context.user.name;
const selectPrimaryColor = (context) => context.theme.primaryColor;

            

              
                Copy
              
            
          

3. 사용자 정의 훅 (`useContextSelector`) 생성

이것이 셀렉터 패턴의 핵심입니다. `useContextSelector` 훅은 셀렉터 함수를 입력으로 받아 선택한 값을 반환합니다. 또한 Context에 대한 구독을 관리하고 선택한 값이 변경될 때만 리렌더링을 트리거합니다.

            import { useContext, useState, useEffect, useRef } from 'react';

const useContextSelector = (context, selector) => {
  const [selected, setSelected] = useState(() => selector(useContext(context)));
  const latestSelector = useRef(selector);
  const contextValue = useContext(context);

  useEffect(() => {
    latestSelector.current = selector;
  });

  useEffect(() => {
    const nextSelected = latestSelector.current(contextValue);
    if (!Object.is(selected, nextSelected)) {
      setSelected(nextSelected);
    }
  }, [contextValue]);

  return selected;
};

export default useContextSelector;

            

              
                Copy
              
            
          

설명:

• `useState`: 셀렉터에서 반환된 초기 값으로 `selected`를 초기화합니다.
• `useRef`: 최신 `selector` 함수를 저장하여 컴포넌트가 리렌더링되더라도 최신 셀렉터를 사용하도록 합니다.
• `useContext`: 현재 컨텍스트 값을 가져옵니다.
• `useEffect`: 이 효과는 `contextValue`가 변경될 때마다 실행됩니다. 내부적으로 `latestSelector`를 사용하여 선택한 값을 다시 계산합니다. 새 선택한 값이 현재 `selected` 값과 다른 경우(깊은 비교를 위해 `Object.is` 사용), `selected` 상태가 업데이트되어 리렌더링이 트리거됩니다.

4. 컴포넌트에서 Context 사용

이제 컴포넌트가 `useContextSelector` 훅을 사용하여 Context의 특정 부분을 구독할 수 있습니다.

            import React from 'react';
import { AppContext, AppProvider } from './AppContext';
import useContextSelector from './useContextSelector';

const UserName = () => {
  const userName = useContextSelector(AppContext, selectUserName);

  return 
User Name: {userName}
;
};

const ThemeColorDisplay = () => {
  const primaryColor = useContextSelector(AppContext, selectPrimaryColor);

  return 
Theme Color: {primaryColor}
;
};

const App = () => {
  return (
    
      
      
    
  );
};

export default App;

            

              
                Copy
              
            
          

이 예제에서 `UserName`은 사용자 이름이 변경될 때만 리렌더링되고 `ThemeColorDisplay`는 기본 색상이 변경될 때만 리렌더링됩니다. 사용자 이메일이나 위치를 수정해도 `ThemeColorDisplay`가 리렌더링되지 않으며 그 반대도 마찬가지입니다.

셀렉터 패턴의 이점

• 리렌더링 감소: 주요 이점은 불필요한 리렌더링이 크게 줄어들어 성능이 향상된다는 것입니다.
• 성능 향상: 리렌더링을 최소화하여 애플리케이션의 응답성이 향상되고 효율성이 높아집니다.
• 코드 명확성: 셀렉터 함수는 컴포넌트의 데이터 종속성을 명시적으로 정의하여 코드 명확성과 유지 관리성을 향상시킵니다.
• 테스트 용이성: 셀렉터 함수는 순수 함수이므로 테스트하고 추론하기 쉽습니다.

고려 사항 및 최적화

1. 메모이제이션

메모이제이션은 셀렉터 함수의 성능을 더욱 향상시킬 수 있습니다. 입력 Context 값이 변경되지 않은 경우 셀렉터 함수는 캐시된 결과를 반환하여 불필요한 계산을 방지할 수 있습니다. 이는 비용이 많이 드는 계산을 수행하는 복잡한 셀렉터 함수에 특히 유용합니다.

`useMemo` 훅을 `useContextSelector` 구현 내에서 사용하여 선택한 값을 메모이제이션할 수 있습니다. 이는 Context 값이 변경되었지만 선택한 값이 동일하게 유지되더라도 불필요한 리렌더링을 방지하는 또 다른 최적화 계층을 추가합니다. 다음은 메모이제이션을 사용하도록 업데이트된 `useContextSelector`입니다.

            import { useContext, useState, useEffect, useRef, useMemo } from 'react';

const useContextSelector = (context, selector) => {
  const latestSelector = useRef(selector);
  const contextValue = useContext(context);

  useEffect(() => {
    latestSelector.current = selector;
  }, [selector]);

  const selected = useMemo(() => latestSelector.current(contextValue), [contextValue]);

  return selected;
};

export default useContextSelector;

            

              
                Copy
              
            
          

2. 객체 불변성

셀렉터 패턴이 올바르게 작동하려면 Context 값의 불변성을 보장하는 것이 중요합니다. Context 값이 직접 변경되면 셀렉터 함수가 변경 사항을 감지하지 못하여 잘못된 렌더링이 발생할 수 있습니다. Context 값을 업데이트할 때는 항상 새 객체 또는 배열을 만드세요.

3. 깊은 비교

`useContextSelector` 훅은 선택한 값을 비교하기 위해 `Object.is`를 사용합니다. 이것은 얕은 비교를 수행합니다. 복잡한 객체의 경우 변경 사항을 정확하게 감지하려면 깊은 비교 함수를 사용해야 할 수 있습니다. 그러나 깊은 비교는 계산 비용이 많이 들 수 있으므로 신중하게 사용하세요.

4. `Object.is`에 대한 대안

`Object.is`가 충분하지 않은 경우(예: 컨텍스트에 깊이 중첩된 객체가 있는 경우) 대안을 고려하세요. `lodash`와 같은 라이브러리는 깊은 비교를 위해 `_.isEqual`을 제공하지만 성능에 미치는 영향을 염두에 두세요. 경우에 따라 변경 불가능한 데이터 구조(Immer와 같은)를 사용하는 구조적 공유 기술이 유용할 수 있습니다. 이러한 기술을 사용하면 원본을 변경하지 않고도 중첩된 객체를 수정할 수 있으며, `Object.is`로 비교할 수 있는 경우가 많습니다.

5. 셀렉터에 대한 `useCallback`

`selector` 함수 자체가 올바르게 메모이제이션되지 않으면 불필요한 리렌더링의 원인이 될 수 있습니다. `selector` 함수를 `useCallback`에 전달하여 종속성이 변경될 때만 다시 생성되도록 하세요. 이렇게 하면 사용자 정의 훅에 대한 불필요한 업데이트를 방지할 수 있습니다.

            const UserName = () => {
  const userName = useContextSelector(AppContext, useCallback(selectUserName, []));

  return 
User Name: {userName}
;
};

            

              
                Copy
              
            
          

6. `use-context-selector`와 같은 라이브러리 사용

`use-context-selector`와 같은 라이브러리는 성능에 최적화되고 얕은 비교와 같은 기능이 포함된 미리 빌드된 `useContextSelector` 훅을 제공합니다. 이러한 라이브러리를 사용하면 코드를 단순화하고 오류가 발생할 위험을 줄일 수 있습니다.

            import { useContextSelector } from 'use-context-selector';
import { AppContext } from './AppContext';

const UserName = () => {
  const userName = useContextSelector(AppContext, selectUserName);

  return 
User Name: {userName}
;
};

            

              
                Copy
              
            
          

글로벌 예제 및 모범 사례

셀렉터 패턴은 글로벌 애플리케이션의 다양한 사용 사례에 적용할 수 있습니다.

• 지역화: 여러 언어를 지원하는 전자 상거래 플랫폼을 상상해 보세요. Context는 현재 로캘과 번역을 보유할 수 있습니다. 텍스트를 표시하는 컴포넌트는 셀렉터를 사용하여 현재 로캘에 대한 관련 번역을 추출할 수 있습니다.
• 테마 관리: 소셜 미디어 애플리케이션을 통해 사용자가 테마를 사용자 정의할 수 있습니다. Context는 테마 설정을 저장할 수 있으며, UI 요소를 표시하는 컴포넌트는 셀렉터를 사용하여 관련 테마 속성(예: 색상, 글꼴)을 추출할 수 있습니다.
• 인증: 글로벌 엔터프라이즈 애플리케이션은 Context를 사용하여 사용자 인증 상태 및 권한을 관리할 수 있습니다. 컴포넌트는 셀렉터를 사용하여 현재 사용자에게 특정 기능에 대한 액세스 권한이 있는지 여부를 확인할 수 있습니다.
• 데이터 가져오기 상태: 많은 애플리케이션이 로딩 상태를 표시합니다. 컨텍스트는 API 호출의 상태를 관리할 수 있으며, 컴포넌트는 특정 엔드포인트의 로딩 상태를 선택적으로 구독할 수 있습니다. 예를 들어 사용자 프로필을 표시하는 컴포넌트는 `GET /user/:id` 엔드포인트의 로딩 상태만 구독할 수 있습니다.

대체 최적화 기술

셀렉터 패턴은 강력한 최적화 기술이지만 사용할 수 있는 유일한 도구는 아닙니다. 다음 대안을 고려해 보세요.

• `React.memo`: props가 변경되지 않은 경우 리렌더링을 방지하기 위해 함수형 컴포넌트를 `React.memo`로 래핑합니다. 이는 props를 직접 받는 컴포넌트를 최적화하는 데 유용합니다.
• `PureComponent`: 클래스 컴포넌트에 `PureComponent`를 사용하여 리렌더링하기 전에 props 및 상태의 얕은 비교를 수행합니다.
• 코드 분할: 애플리케이션을 요청 시 로드할 수 있는 더 작은 청크로 나눕니다. 이렇게 하면 초기 로드 시간이 줄어들고 전체 성능이 향상됩니다.
• 가상화: 대량의 데이터 목록을 표시하려면 가상화 기술을 사용하여 보이는 항목만 렌더링합니다. 이렇게 하면 대량의 데이터 세트를 처리할 때 성능이 크게 향상됩니다.

결론

셀렉터 패턴은 불필요한 리렌더링을 최소화하여 React Context 성능을 최적화하는 데 유용한 기술입니다. 컴포넌트가 필요한 Context 값의 특정 부분만 구독할 수 있도록 하여 애플리케이션 응답성 및 효율성을 향상시킵니다. 메모이제이션 및 코드 분할과 같은 다른 최적화 기술과 결합하여 원활한 사용자 경험을 제공하는 고성능 React 애플리케이션을 구축할 수 있습니다. 애플리케이션의 특정 요구 사항에 따라 올바른 최적화 전략을 선택하고 관련된 장단점을 신중하게 고려해야 합니다.

이 기사에서는 구현, 이점 및 고려 사항을 포함하여 셀렉터 패턴에 대한 포괄적인 가이드를 제공했습니다. 이 기사에 설명된 모범 사례를 따르면 React Context 사용을 효과적으로 최적화하고 글로벌 사용자를 위한 고성능 애플리케이션을 구축할 수 있습니다.